<template>
  <el-dialog v-model="dialogVisible" width="85%" title="总数据消耗时速" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
    <base-skeleton v-if="pageLoad.loadState === true" style="width: 100%; height: 100%; min-height: 500px; padding: 0 20px"></base-skeleton>
    <div v-else-if="pageLoad.loadState === false" class="content-wrap" style="min-height: 500px">
      <div class="table">
        <!--
          <div class="statistics-block">
          <div v-for="i in statisticsData" :key="i.flag" class="statistics">
          <div class="title">{{ i.name }}</div>
          <div class="value">{{ i.format(censusData) }}</div>
          </div>
          </div> 
        -->
        <el-table v-loading="baseData.loading" max-height="70vh" border :data="list" showOverflowTooltip stripe style="width: 100%">
          <el-table-column fixed type="index" label="编号" sortable width="60" align="center" headerAlign="center"></el-table-column>
          <el-table-column label="时间" fixed prop="referralLinkName" minWidth="140">
            <template #default="{ row }">
              <span v-if="dataType === 0">{{ proxy.$dayjs(row.thatdayHoursTimestamp * 1000).format('YYYY-MM-DD HH:mm') }}</span>
              <span v-if="dataType === 1">{{ proxy.$dayjs(row.thatdayMintuesTimestamp * 1000).format('YYYY-MM-DD HH:mm') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="账户消耗" prop="cost" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatNumberWithMoney(row.cost) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新增充值" prop="thatdayTotalAmount" width="120" sortable></el-table-column>
          <el-table-column label="新增分成金额" prop="thatdayDividendAmount" width="140" sortable>
            <template #default="{ row }">
              <span>{{ formatNumberWithMoney(row.thatdayDividendAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="利润" prop="thatdayProfitAmount" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatNumberWithMoney(row.thatdayProfitAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回本率" prop="extRecoveryRate" minWidth="120">
            <template #default="{ row }">
              <span>{{ row.extRecoveryRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="展示数" prop="show" width="120" sortable></el-table-column>
          <el-table-column label="平均千次展现费用" prop="avgShowCost" width="170" sortable></el-table-column>
          <el-table-column label="点击数" prop="click" width="120" sortable></el-table-column>
          <el-table-column label="点击成本" prop="avgClickCost" width="120" sortable></el-table-column>
          <el-table-column label="点击率" prop="ctr" width="120" sortable></el-table-column>
          <el-table-column label="转化数" prop="convert" minWidth="110" sortable></el-table-column>
          <el-table-column label="转化成本" prop="convertCost" minWidth="110" sortable></el-table-column>
          <el-table-column label="转化率" prop="convertRate" minWidth="110" sortable></el-table-column>
          <el-table-column label="激活数" prop="active" minWidth="110" sortable></el-table-column>
          <el-table-column label="激活成本" prop="activeCost" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费人数" prop="thatdayPaidUseNum" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费次数" prop="thatdayPaidTotalNum" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费成本" prop="extPayCost" minWidth="110">
            <template #default="{ row }">
              <span>{{ row.extPayCost }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客单价" prop="extAvgPrice" minWidth="110">
            <template #default="{ row }">
              <span>{{ row.extAvgPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回传率" prop="" minWidth="110">
            <template #default="{ row }">
              <span>{{ convertToPercentage(row.convert, row.thatdayPaidUseNum) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <base-empty
      v-else
      style="height: 100%"
      :description="pageLoad.description || ''"
      :imageSize="240"
      :loadState="pageLoad.loadState"
      :pageLoadButton="[{ text: '重新加载', callBack: getBaseDataAxios }]"
    ></base-empty>
  </el-dialog>
</template>

<script setup lang="ts">
  import {
    type GetOceEverydayHoursTotalCostRequest,
    type GetPageEverydayConsumeRequest,
    type OceEverydayHoursTotalCostItem,
    getOceEverydayHoursTotalCost,
  } from '@/api/marketing-management';
  import { convertToPercentage, formatNumberWithMoney } from '@/utils/numb';

  const { proxy } = getCurrentInstance() as any;

  type $ShowData = {
    filterData?: GetPageEverydayConsumeRequest;
  };

  const baseData = shallowReactive({
    /** 加载状态 */
    loading: false,
    /** 总数量 */
    total: 0,
  });

  const dataType = ref<0 | 1>(0);
  const filterData = ref<GetOceEverydayHoursTotalCostRequest>({
    startDate: '',
    appType: '',
    endDate: '',
    dramaTitle: '',
    createName: '',
    referralLinkId: '',
    referralLinkType: '',
    thirdAdvertiserId: '',
    thirdAdvertiserName: '',
  });

  const pageLoad = shallowReactive<$PageLoad>({ loadState: true, description: '' });

  const dialogVisible = ref(false);
  const list = ref<OceEverydayHoursTotalCostItem[]>([]);
  /** 请求 */
  async function getBaseDataAxios(getCensusData = true) {
    try {
      getCensusData && (pageLoad.loadState = true);
      const res = await getOceEverydayHoursTotalCost(filterData.value);
      list.value = res.data;
      pageLoad.loadState = false;
    } catch (error) {
      pageLoad.loadState = 'err';
      pageLoad.description = String((error as Record<string, unknown>).msg || '') || '获取数据失败';
    }
  }

  /**
   * 显示
   */
  function show(data: $ShowData) {
    filterData.value = { ...data.filterData! };
    dialogVisible.value = true;
    getBaseDataAxios();
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  defineExpose({ show, hide });
</script>

<style lang="scss" scoped>
  .link-box {
    @include flex(row, nowrap, flex-start, center, center);
    width: 100%;
    height: 80px;
    padding: 15px;
    overflow: hidden;

    .title {
      display: inline-block;
      width: 64px;
      margin-right: 20px;
      font-size: 14px;
      text-align: left;
    }
  }

  .content-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .table {
      flex: 1;
    }

    .pagination-box {
      display: flex;
      justify-content: center;
    }
  }
</style>
